<template>
  <transition name="fade"
              @after-leave="handleAfterLeave">
    <div class="login-container"
         v-show="visible">
      <div class="login-wrapper">
        <span class="close"
              @click="close()"></span>
        <p class="title">登录</p>
        <div class="form">
          <div class="input-group phone">
            <span class="icon"></span>
            <input type="number"
                   maxlength='11'
                   v-model="mobile"
                   placeholder="请输入手机号" />
          </div>

          <div class="input-group password">
            <span class="icon"></span>
            <input :type="isShowPasswrod ? 'text' : 'password'"
                   v-model="password"
                   placeholder="请输入密码" />
            <span :class="[{ show: isShowPasswrod }, 'eye']"
                  @click="isShowPasswrod = !isShowPasswrod"></span>
          </div>
        </div>
        <p class="tips">{{ tips }}</p>
        <button class="btn"
                @click="login()">
          {{ loading ? '登录中...' : '登录' }}
        </button>

        <div class="step-container">
          <div class='title'>
            <span class='line'></span>
            <span class='text'>忘记密码操作步骤</span>
            <span class='line'></span>
          </div>

          <div class='step-list'>
            <span class="text">打开APP</span>
            <img src="../../assets/下一步24X24@2x.png"
                 alt="">
            <span class="text">头像</span>
            <img src="../../assets/下一步24X24@2x.png"
                 alt="">
            <span class="text">注销退出</span>
            <img src="../../assets/下一步24X24@2x.png"
                 alt="">
            <span class="text">找回密码</span>
          </div>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
export default {
  name: 'Login',
  data () {
    return {
      visible: false,
      isShowPasswrod: false,
      successCb: undefined,
      tips: '',
      mobile: '',
      password: '',
      org_id: undefined,
      loading: false,
    }
  },
  methods: {
    handleAfterLeave () {
      this.$destroy(true);
      this.$el.parentNode.removeChild(this.$el);
    },
    close () {
      this.visible = false;
    },
    login () {
      const { password, mobile, org_id, loading } = this;

      if (loading) {
        return
      }


      if (mobile.length < 11) {
        this.tips = '请输入正确手机号'
        return
      }

      if (password.length === 0) {
        this.tips = '请输入密码'
        return
      }

      this.$api.user.login({
        password,
        mobile,
        org_id,
      }).then(data => {
        this.loading = false;
        if (data.code > 0) {
          console.log(data)
          this.successCb(JSON.parse(data.data))
          this.close();
        } else {
          this.tips = data.data;
        }
      }).catch(() => {
        this.loading = false;
        this.tips = '网络错误'
      })
    }
  },
  mounted () {
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.login-container {
  position: fixed;
  left: 0;
  top: 0;
  height: 100vh;
  width: 100vw;
  background: rgba(0, 0, 0, 0.6);
  z-index: $maxIndex;
  .login-wrapper {
    position: relative;
    margin: 1.54rem auto 0;
    width: 5.6rem;
    min-height: 5.6rem;
    padding-bottom: 0.4rem;
    background-color: #fff;
    border-radius: 0.16rem;
    .close {
      position: absolute;
      top: 0.32rem;
      right: 0.32rem;
      width: 0.48rem;
      height: 0.48rem;
      background-image: url("../../assets/关闭窗口48X48@2x.png");
      background-size: 100%;
      background-repeat: no-repeat;
    }
    .title {
      padding-top: 0.48rem;
      height: 0.34rem;
      font-size: 0.36rem;
      color: #000000;
      line-height: 1;
      text-align: center;
    }
    .input-group {
      box-sizing: border-box;
      display: flex;
      padding-bottom: 0.28rem;
      padding-top: 0.48rem;
      margin: 0 auto;
      height: 1.2rem;
      width: 4.96rem;
      border-bottom: 0.01rem solid #999;
      input {
        margin-left: 0.55rem;
        width: 3.2rem;
        font-size: 0.32rem;
      }
      .icon {
        flex-shrink: 0;
        height: 0.44rem;
        width: 0.44rem;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100%;
      }
      &.phone {
        .icon {
          background-image: url("../../assets/手机图标44X44@2x.png");
        }
      }
      &.password {
        .icon {
          background-image: url("../../assets/密码图标44X44@2x.png");
        }
      }

      .eye {
        flex-shrink: 0;
        margin-left: 0.3rem;
        height: 0.36rem;
        width: 0.36rem;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100%;
        background-image: url("../../assets/密码显示图标（密码保密）36X36@2x.png");
        &.show {
          background-image: url("../../assets/密码显示图标（密码显示）36X36@2x.png");
        }
      }
    }
  }
  .tips {
    margin: 0 auto;
    min-height: 0.48rem;
    width: 4.96rem;
    color: #ff0000;
    font-size: 0.2rem;
    line-height: 2;
  }
  .btn {
    padding: 0;
    display: block;
    margin: 0 auto;
    width: 4.96rem;
    height: 0.72rem;
    background-color: $them;
    border-radius: 0.36rem;
    color: #fff;
    text-align: center;
    line-height: 0.72rem;
    font-size: 0.36rem;
    letter-spacing: 0.1rem;
    color: #ffffff;
  }

  .step-container {
    .title {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 0.2rem;
      .line {
        width: 1rem;
        height: 0.02rem;
        background-color: #ebebeb;
      }
      .text {
        padding: 0 0.16rem;
        font-size: 0.2rem;
        color: #999;
      }
    }
  }

  .step-list {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.28rem;
    font-size: 0.24rem;
    color: #999;
    img {
      margin: 0 0.12rem;
      height: 0.24rem;
      width: 0.24rem;
    }
  }
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}

// --- 主题 green-them
.green-them {
  .login-container {
    .btn {
      background-color: $them;
    }
  }
}
// 主题 green-them ---

// --- 主题 blue-them
.blue-them {
  .login-container {
    .btn {
      background-color: $blue-them;
    }
  }
}
// 主题 blue-them ---
</style>
